<template>
  <!-- 职位管理 -->
  <div>
    <!-- 搜索容器 -->
    <div class="search-container">
      <!-- 行业输入框 -->
      <span class="search-label">职位类别：</span>
      <el-input v-model="typeName" placeholder="搜索职位类别" class="search-input search-industry" clearable>
      </el-input>

      <!-- 职位输入框 -->
      <span class="search-label">职位：</span>
      <el-input v-model="jobName" placeholder="搜索职位" class="search-input" clearable>
      </el-input>

      <!-- 状态下拉框（仅启用和禁用） -->
      <span class="search-label">状态：</span>
      <el-select v-model="jobStatus" placeholder="请选择状态" class="search-select">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>

      <el-button type="primary" class="search-button" @click="handleSearch">查询</el-button>
      <el-button type="success" class="search-button" @click="handleReset">重置</el-button>
      <el-button type="success" class="search-button">添加职位</el-button>
    </div>

    <el-table :data="tableData" border style="width: 100%; margin-top: 15px;"
      :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
      <!-- 第一列：行业 -->
      <el-table-column prop="jobTypeDO.typeName" label="职位类别"></el-table-column>

      <!-- 第二列：职位 -->
      <el-table-column prop="jobName" label="职位"></el-table-column>

      <!-- 第三列：职位简介 -->
      <el-table-column prop="jobInfo" label="职位简介"></el-table-column>

      <!-- 第四列：状态列 -->
      <el-table-column label="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.jobStatus === 0" type="success">启用</el-tag>
          <el-tag v-else-if="scope.row.jobStatus === 1" type="danger">禁用</el-tag>
        </template>
      </el-table-column>

      <!-- 第五列：职位操作 -->
      <el-table-column label="职位操作" width="260">
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.row)" type="text" size="small">修改职位</el-button>
          <el-button @click="handleDelete(scope.row)" type="text" size="small">删除职位</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination class="pagination-left" background layout="prev, pager, next" :total="1000"></el-pagination>

    <!-- 编辑职位弹窗 -->
    <el-dialog title="编辑职位" :visible.sync="editDialogVisible" width="500px" :close-on-click-modal="false">
      <el-form :model="editData" label-width="100px">
        <el-form-item label="职位类别：">
          <el-input v-model="editData.typeName"></el-input>
        </el-form-item>

        <el-form-item label="职位：">
          <el-input v-model="editData.jobName"></el-input>
        </el-form-item>

        <el-form-item label="职位简介：">
          <el-input v-model="editData.jobInfo" type="textarea" :rows="4"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveEdit" :loading="isSaving">保存</el-button>
      </div>
    </el-dialog>

    <!-- 删除弹窗 -->
    <el-dialog title="删除职位" :visible.sync="deleteDialogVisible" width="420px" center class="delete-dialog">
      <div class="delete-content">
        <div class="message-row">
          <i class="el-icon-warning warning-icon"></i>
          <div class="text-content">
            <p class="message">
              确定要删除 <span class="course-name">{{ currentDeleteRow?.jobName }}</span> 职位吗？
            </p>
            <p class="warning-message">
              此操作不可撤销！
            </p>
          </div>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false" size="small">取消</el-button>
        <el-button type="danger" @click="confirmDelete" size="small" icon="el-icon-delete" class="confirm-delete-btn">
          确认删除
        </el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { selectByJob, updateByJob, deleteByJob } from "@/api/job"
export default {
  methods: {
    // 打开编辑弹窗并初始化数据
    handleEdit(row) {
      // 复制行数据到编辑对象，避免直接修改表格数据
      this.editData = {
        jobId: row.jobId,
        typeName: row.jobTypeDO.typeName,
        jobName: row.jobName,
        jobInfo: row.jobInfo
      }
      this.editDialogVisible = true
    },

    // 保存编辑
    async saveEdit() {
      try {
        this.isSaving = true;

        // 1. 调用API更新数据
        const response = await updateByJob(this.editData);
        console.log("-******--"+response.data);
        

        if (response.data && response.data.code === 200) {
          // 2. 关闭弹窗并提示
          this.editDialogVisible = false;
          this.$message.success('职位信息更新成功');

          // 3. 重新查询数据库，获取最新数据（核心修改）
          this.loadData({
            typeName: this.typeName,  // 保留当前搜索条件
            jobName: this.jobName,
            jobStatus: this.jobStatus,
          });
        } else {
          this.$message.error(`更新失败: ${response.data.message || '未知错误'}`);
        }
      } catch (error) {
        console.error('更新失败:', error);
        this.$message.error('更新失败，请重试');
      } finally {
        this.isSaving = false;
      }
    },

    // 打开删除弹窗
    handleDelete(row) {
      this.currentDeleteRow = row; // 保存当前要删除的行数据
      this.deleteDialogVisible = true;
    },

    // 确认删除
    async confirmDelete() {
      try {
        const params = {
          jobId: this.currentDeleteRow.jobId // 使用当前删除行的jobId
        };

        console.log('删除参数:', params);
        const response = await deleteByJob(params);

        if (response.data && response.data.code === 200) {
          // 从表格中移除已删除的数据
          this.tableData = this.tableData.filter(item => item.jobId !== this.currentDeleteRow.jobId);
          this.deleteDialogVisible = false;
          this.$message.success('职位删除成功');
        } else {
          this.$message.error(`删除失败: ${response.data.message || '未知错误'}`);
        }
      } catch (error) {
        console.error('删除职位失败:', error);
        this.$message.error('删除职位失败，请检查网络连接');
      }
    },

    // 查询按钮点击事件
    handleSearch() {
      this.loadData({
        typeName: this.typeName,
        jobName: this.jobName,
        jobStatus: this.jobStatus,
      });
    },

    // 重置按钮点击事件
    handleReset() {
      this.typeName = '';
      this.jobName = '';
      this.jobStatus = '';
      this.loadData({});
    },

    // 加载数据方法
    async loadData(params) {
      try {
        const response = await selectByJob(params);
        this.tableData = response.data || [];
      } catch (error) {
        console.error("数据加载失败:", error);
        this.$message.error("加载数据失败，请稍后重试");
      }
    },

  },
  data() {
    return {
      // 编辑弹窗相关
      editDialogVisible: false,
      editData: { jobId: null, typeName: '', jobName: '', jobInfo: '' },
      isSaving: false, // 保存按钮加载状态

      // 删除弹窗相关
      deleteDialogVisible: false,
      currentDeleteRow: null, // 当前要删除的行数据

      // 搜索条件
      jobId: '',
      typeName: '',
      jobName: '',
      jobStatus: null,
      tableData: [],

      // 状态选项
      options: [
        { value: 0, label: '启用' },
        { value: 1, label: '禁用' }
      ],
    }
  },

  created() {
    this.loadData({});
  },
}
</script>

<style scoped>
.search-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 0;
}

.search-label {
  white-space: nowrap;
  font-size: 14px;
  color: #606266;
  margin-right: 0;
}

.search-input {
  width: 160px;
  margin-right: 8px;
}

.search-select {
  width: 160px;
  margin-right: 8px;
}

.search-button {
  margin-left: 8px;
}

.el-table th {
  height: 70px !important;
  line-height: 70px !important;
}

.el-table {
  margin-top: 15px;
}

.el-table__header-wrapper th {
  background-color: #f5f7fa;
}

.pagination-left {
  margin-top: 15px;
  text-align: left;
}

.el-table .el-button--text {
  margin: 0 5px;
}

/* 删除弹窗样式 */
.delete-dialog .message-row {
  display: flex;
  align-items: center;
}

.delete-dialog .warning-icon {
  color: #faad14;
  margin-right: 8px;
  font-size: 30px;
}

.delete-dialog .text-content {
  flex: 1;
}

.delete-dialog .message {
  margin: 0 0 8px 0;
  line-height: 1.5;
}

.delete-dialog .warning-message {
  margin: 0;
  color: #f56c6c;
  line-height: 1.5;
}

.course-name {
  color: #1890ff;
  font-weight: bold;
}
</style>